<template>
	<view class="wine_home">
		<view class="wine_bg">
			<view class="wine_content">
				<image :src="src" mode=""></image>
				<text class="wine_names">短腿小柯基</text>
			</view>
			<view class="wine_Inviting">
				<image id="inviting_one" class="rowupGo" src="../../static/winetasting/wine_Inviting.svg" mode=""></image>
				<image id="inviting_two" class="rowupGo-tow" src="../../static/winetasting/wine_Inviting.svg" mode=""></image>
				<image id="inviting" src="../../static/winetasting/Inviting.png" mode=""></image>
				<image id="inviting_three" class="rowupGo-three" src="../../static/winetasting/wine_Inviting.svg" mode=""></image>
				<image id="inviting_four" class="rowupGo-four" src="../../static/winetasting/wine_Inviting.svg" mode=""></image>
			</view>
			<view class="good_wine">
				<image src="../../static/winetasting/good_wine.png" mode=""></image>
			</view>
			<view class="good_progressbg">
				<view style="margin-top: 24rpx;height:60rpx;justify-content: space-around;align-items: center;display: flex;">
					<view class="progress">
						 <swiper class="swiper"style="inset: 13rpx 0rpx;" :easing-function="easeOutCubic"  :circular="circular" :vertical="true" previous-margin="16rpx"  next-margin="18rpx" :autoplay="autoplay" :interval="interval" :duration="duration">
							<swiper-item changing-class="swiperCalss" style="height: 100%;" v-for="(item , index) in swiperList" :key="index">
								<view style="display: flex;justify-content: safe;align-items: center;padding: 16rpx 0rpx;height: 48rpx;">
									<view class="wine_logo">
										<image :src="item.image" mode=""></image>
									</view>
									<text class="wine_name">{{item.title}}</text>
								</view>
							</swiper-item>
						</swiper>
							
					</view>
					<view class="rule"  @click="show = true">
						活动规则
					</view>
					<!-- 弹窗 -->
					<u-mask :show="show">
						<view class="warp">
							<view class="rect" @tap.stop>
								<view class="rect_rule">
									活动规则
								</view>
								<view class="rule_title">
									免费品好酒：</p>
									1.用户通过每一次邀请一个新用户注册小程序，</p>
									可获得5-15毫升的酒体，且该新用户将绑定成  </p>
									为其下线，获得下线消费佣金</p>
									邀请老用户无法获得酒体奖励。</p>
									2.酒体达到125ml时，可兑换为一瓶125ml九仙</p>
									御贡酒</p>
									酒体达到500ml时，可兑换为两瓶125ml九仙御</p>
									贡酒或一瓶500ml九仙御贡酒</p>
									酒体达到1000ml时，可兑换为一套精品装九仙</p>
									御贡酒</p>
									3.获赠的酒可线下自提，也可选择平台邮寄
								</view>
								<view class="rule_title1">
									集瓶盖赢大奖：</p>
									1.用户通过扫码九仙御贡瓶盖或获得瓶盖中的兑</p>
									换码，即可获得一个虚拟瓶盖</p>
									2.集成10个瓶盖，即可兑换一瓶125ml的九仙御</p>
									贡系列酒
								</view>
								<view class="rule_buttom" @click="show = false">
									我已知晓
								</view>
							</view>
						</view>
					</u-mask>
				</view>
				<view class="progress_bar">
					<view class="ez_bg"></view>         <!--最底层背景 -->
					<view class="ez_bao">               <!--动态长度  动态指示牌 -->
						<view class="ez_bg2" :style="{width: progressBar}">
							<view v-show="progressBars != 0 && progressBars != 125 && progressBars != 1000 && progressBars != 500">
								<view class="indicator_title">
									可获得125ml酒还差8ml
								</view>
								<image src="https://lovebirdopen.com/static/img/wineTasting/gan.svg" mode=""></image>
							</view>
						</view> 
					</view>
					<view class="ez_jiup">
						<view class="ez_jiups">
							<view :class="[progressBars == 125 ? 'ez_jiup3_1' : 'ez_jiup1_1']">
								<view v-show="progressBars == 125">
									<view class="ez_jiupRod"></view>
									<view class="ez_jiupBrand">可领酒</view>
								</view>
								<view class="receivedTitle" v-show="progressBars > 125">已取酒</view>
							</view>
							<view :class="[progressBars == 500 ? 'ez_jiup3_2' : 'ez_jiup1_2']">
								<view v-show="progressBars == 500">
									<view class="ez_jiupRod"></view>
									<view class="ez_jiupBrand">可领酒</view>
								</view>
								<view class="receivedTitle" v-show="progressBars > 500">已取酒</view>
							</view>
							<view :class="[progressBars == 1000 ? 'ez_jiup3_3' : 'ez_jiup1_3']">
								<view v-show="progressBars == 1000">
									<view class="ez_jiupRod"></view>
									<view class="ez_jiupBrand">可领酒</view>
								</view>
								<view class="receivedTitle" v-show="progressBars > 1000">已取酒</view>
							</view>
						</view>
						<view class="ez_jiupss">
							<view class="ez_jiupss1">125ml</view>
							<view class="ez_jiupss2">500ml</view>
							<view class="ez_jiupss3">1000ml</view>
						</view>
					</view>
				</view>
			</view>
			<view class="power_button">
				<view class="power_button_one" @click="shareWayShow = true">
					邀请好友助力
				</view>
			</view>
			<view class="second_kill_list">
				<view class="second_kill">
					<image id="inviting_one"  src="../../static/winetasting/rectangle.svg" mode=""></image>
					<image id="inviting_two"  src="../../static/winetasting/rectangle.svg" mode=""></image>
					<view class="wine_I_1">距结束</view>
					<image id="inviting_three"  src="../../static/winetasting/rectangle_1.svg" mode=""></image>
					<image id="inviting_four" src="../../static/winetasting/rectangle_1.svg" mode=""></image>
					
				</view>
				<view  style="width: 100%;display: flex;justify-content: center;" >
					<u-count-down 
						separator="zh"
						:timestamp="timestamp"
						font-size="28rpx"
						hide-zero-day="flase"
						color="#FFFFFF"
						bg-color="#FF5238"
						separator-color="#FF5238"
						separator-size="30"
					></u-count-down>
				</view>
				<view class="second_list" v-for="(item,index) in jiu_list" :key="index" >
					<image :src="item.jiuimg" mode=""></image>
					<view class="second_content">
						<view class="second_title">
							52度纯粮食精酿品质白酒白酒1瓶白酒1瓶
						</view>
						<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
							<view class="progress_ss" style="width: 30%;">
								已完成80%
							</view>
							<view style="width: 70%;">
								<u-line-progress
								 :striped="flase" 
								 :percent="70" 
								 :height="16"
								 :show-percent="flase"
								 active-color="#FF5238"
								 :striped-active="flase"
								></u-line-progress>
							</view>
						</view>
						<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;margin-top: 10rpx;">
							<view class="progress_kk">
								￥80.00
							</view>
							<view v-if="glup != flase" class="progress_kk2">
								免费品酒
							</view>
							<view v-else class="progress_kk3">
								免费品酒
							</view>
						</view>
					</view>
				</view>
				
			</view>
			<view class="tabsswiper">
				<!-- 头部 -->
				<view class="navbar">
					<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(item.state)">
						{{ item.text }}
					</view>
				</view>
				<view class="wine_I">
					<image id="inviting_one" class="rowupGo" src="../../static/winetasting/wine_Inviting.svg" mode=""></image>
					<image id="inviting_two" class="rowupGo-tow" src="../../static/winetasting/wine_Inviting.svg" mode=""></image>
					<text v-show="tabCurrentIndex === 0" class="wine_I_1">短腿小柯基的助力团  98ml</text>
					<image id="inviting_three" class="rowupGo-three" src="../../static/winetasting/wine_Inviting.svg" mode=""></image>
					<image id="inviting_four" class="rowupGo-four" src="../../static/winetasting/wine_Inviting.svg" mode=""></image>
				</view>
				<!-- 显示区域 -->
				<view class="list" v-show="tabCurrentIndex === 0"> 
					<view class="tabs_list" v-for="(item, index) in orderList" :key="index">
						<view style="display: flex;justify-content: space-around;align-items: center;">
							<u-avatar bg-color="#d3d3d3" :src="item.zuli_src" size="80"></u-avatar>
							<view style="margin-left: 30rpx;">
								<view style="font-family: PingFang SC;font-size: 32rpx;">{{item.username}}</view>
								<view style="font-family: PingFang SC;font-size: 24rpx;color: #666666;">几分钟前助理</view>
							</view>
						</view>
						<view style="font-weight: bold;font-size: 32rpx;color: #333333;">
							{{item.haosheng}}ML
						</view>
					</view>
					
				</view>
				
				<view class="list" v-show="tabCurrentIndex === 1">
					<view  class="tabs_list2" v-for="(item, index) in orderList" :key="index">
						<view style="display: flex;justify-content: space-around;align-items: center;">
							<view class="list_ranking">
								<image v-if="index == 0" src="../../static/winetasting/champion.svg" mode="" alt="冠军"></image>
								<image v-if="index == 1" src="../../static/winetasting/runner-up.svg" mode="" alt="亚军"></image>
								<image v-if="index == 2" src="../../static/winetasting/second_runner_up.svg" mode="" alt="季军"></image>
								<text v-if="index > 2">{{index +1}}</text>
							</view>
							<u-avatar style="margin-top: 10rpx;" bg-color="#d3d3d3" :src="item.zuli_src" size="80"></u-avatar>
							<view style="margin-left: 30rpx;">
								<view style="font-family: PingFang SC;font-size: 32rpx;">{{item.username}}</view>
								<view style="font-family: PingFang SC;font-size: 24rpx;color: #666666;">几分钟前助力</view>
							</view>
						</view>
						<view :class="[index == 0 || index == 1 || index == 2 ? 'otherActiveClass' :'active']" style="font-weight: bold;font-size: 32rpx;">
							{{item.haosheng}}ML
						</view>
					</view>
				</view>
				
				<view @click="more()" class="more">
					<view class="more_title">查看更多</view>
					<u-icon name="arrow-down" size="16"></u-icon>
				</view>
			</view>
			
		<view class="save" @click="getToheleTasting()">
			<image src="https://lovebirdopen.com/static/img/wineTasting/bottle_cap.svg" mode=""></image>
			<view class="bottle_title">
				攒瓶盖
			</view>
			<image class="cap_right" src="https://lovebirdopen.com/static/img/wineTasting/cap_right.svg" mode=""></image>
		</view>	
		<!-- 分享 -->
		<view class="goodsPainter" v-if="shareWayShow == true">
			<image :src="posterPath" mode="" v-if="posterPath!=''"></image>
		</view>
		
		<u-popup v-model="shareWayShow" mode="bottom" border-radius="16">
			<view class="shareWaysBox">
				<view class="shareWays">
					<view class="shareWaysEach">
						<button class="shareFriendsBtn" open-type="share" :plain="true" @click="cancelShare">
							<view class="shareWaysEachIcon">
								<u-icon name="weixin-fill" color="#2DC100" size="48"></u-icon>
							</view>
							<view class="tit">微信好友分享</view>
						</button>
					</view>
					<view class="shareWaysEach" @tap="savePoster">
						<view class="shareWaysEachIcon">
							<u-icon name="download" color="#666666" size="48"></u-icon>
						</view>
						<view class="tit">保存图片</view>
					</view>
				</view>
				<!-- 取消 -->
				<view class="cancel" @tap="cancelShare">取消</view>
			</view>
		</u-popup>
		<view class="painterCans">
			<lime-painter :board="myGoods" v-if="isGenerate==1" :isRenderImage="true" @success="posterPath = $event" @fail=""></lime-painter>
		</view>
		
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				progressBars: 600,  //酒量到达位置
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				getmore: true,
				circular:true,
				swiperList:[
					{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉'
					}
				],
				//分享
				shareWayShow: false,
				painterShow: false,
				shareImg: '',
				invitationCode:'',
				
				//生成海报相关参数
				isGenerate: 1,
				posterPath: '',
				myGoods: {
					width: "450rpx",
					height: "660rpx",
					background: "#ffffff",
					views: [
						{ //0产品图
							type: "image",
							url: "https://lovebirdopen.com/static/img/wineTasting/Invite_friends.png",
							css: {
								width: "450rpx",
								height: "660rpx",
								top: "0rpx",
								left: "0rpx",
								mode: "center",
								// radius: '16rpx 16rpx 0 0'
							}
						},
						{ //1 还差多少数量
							type: "text",
							text: '还差125ml免费得好酒',
							css: {
								width: "278rpx",
								height: "44rpx",
								top: "106rpx",
								left: "134rpx",
								mode: "center",
								color: '#FF760B',
								fontSize: '18rpx',
								fontWeight: 'bold'
								// radius: '16rpx 16rpx 0 0'
							}
						},
						{ //2 好友帮助数量1
							type: "view",
							css: {
								width: "160rpx",
								height: "30rpx",
								top: "260rpx",
								left: "40rpx",
								background: '#ffecdb',
								radius: '16rpx 16rpx 0rpx 0rpx'
							}
						},
						{ //3 好友帮助数量
							type: "text",
							text: '26位好友已为他助力',
							css: {
								width: "222rpx",
								height: "24rpx",
								top: "266rpx",
								left: "60rpx",
								mode: "center",
								color: '#FFA648',
								fontSize: '14rpx',
								fontWeight: 'bold'
								// radius: '16rpx 16rpx 0 0'
							}
						},
						{ //4 用户二维码
							type: "image",
							url: "https://lovebirdopen.com/static/img/wineTasting/jiu_img.png",
							css: {
								width: "160rpx",
								height: "160rpx",
								top:'456rpx',
								left:'148rpx',
							}
						},
					]
				},
				goodsId:617743, //获取的id
				invitationCode:'dasdsadahnkd',
				show: false,
				glup: true,
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				timestamp:86400,   //定时器
				text: '无头像',    //头像文本
				jiu_list:[{
						jiuimg:'https://lovebirdopen.com/static/img/wineTasting/jiu_img.png'
					},
					{
						jiuimg:'https://lovebirdopen.com/static/img/wineTasting/jiu_img.png'
					},
					{
						jiuimg:'https://lovebirdopen.com/static/img/wineTasting/jiu_img.png'
				}],
				tabCurrentIndex: 0,
				navList: [
					{
						state: 0,
						text: '助攻纪录',
						orderLists: []
					},
					{
						state: 1,
						text: '全网助攻榜',
						orderLists: []
					},
				],
				
				// 查看更多
				orderList:[
					{	
						id:0,
						username:"我是name",
						zuli_src:'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						haosheng: 25,
					},
					{
						id:1,
						username:"我是name",
						zuli_src:'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						haosheng: 25,
					},
					{
						id:2,
						username:"我是name",
						zuli_src:'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						haosheng: 25,
					},
					{
						id:3,
						username:"我是name",
						zuli_src:'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						haosheng: 25,
					}
				]
			}
		},
		computed:{ 
			progressBar(){   //计算属性 计算每次收到的数据判断给定页面样式宽度
				if(this.progressBars > 1000){
					this.progressBars = 1000
				}
				return ((this.progressBars) /1000).toFixed(2)*100+'%';
			},
		},
		onShow() {
			
		},
		onLoad:function(option){
			// 页面显示是默认选中第一个
			this.tabCurrentIndex = 0;
			console.log(this.progressBar,'实际距离')
			this.init()
			this.gerWxCode(); //获取小程序码
		},
		methods:{
			
			/**
			 * @param { Function } init 初始化
			 */
			init () {
				uni.request({
					url: '',
					data: {
						// val: []
					},
					success: res => {
						this.getmore = res.data.length < 10 ? false : true
					}
				})
			},
			// changeTab(e) {
			// 	this.tabCurrentIndex = e.target.current;
			// 	console.log(e.target.current,'e.target.current')
			// getLogonUser() {
			// 	this.apiget('/fun/member/view', {}).then(res => {
			// 		if (res.data.status == 200) {
			// 			this.myGoods.views[6].url = res.data.data.avatar;
			// 			this.myGoods.views[7].text = res.data.data.nickname;
			// 			this.invitationCode = res.data.data.invitation_code;
			// 			// 获取小程序码
			// 			this.gerWxCode();
			// 		}
			// 	})
			// },
			gerWxCode(){
				this.apipost('/wxxcx/get-wx-code', {page:'pages/index/goodsInfo',scene:'id='+this.goodsId+'&ref='+this.invitationCode,width:280,is_hyaline:1})
				.then(res => {
					if (res.data.status == 200) {
						this.myGoods.views[4].url = res.data.data;
					}
				})
			},
			// getGoodsInfo(id) {
			// 	this.apiget('/fun/goods/view', {
			// 		id: id
			// 	}).then(res => {
			// 		if (res.data.status == 200) {
			// 			this.goodsInfo = res.data.data;
			// 			this.bannerList = res.data.data.imageItems;
			// 			this.myGoods.views[0].url = res.data.data.image;
			// 			this.myGoods.views[4].text = res.data.data.name;
			// 			this.myGoods.views[10].text = res.data.data.price;
			// 			this.myGoods.views[11].text = res.data.data.brief;
			// 			this.shareImg = res.data.data.image;
			// 			this.specs = res.data.data.productItems;
			// 			this.specsId = res.data.data.productItems[this.specsIndex].id;
			// 		}
			// 	})
			// },
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			more(){
				// this.init()
			},
			// 分享
			cancelShare() {
				this.shareWayShow = false;
			},
			// 分享按钮
			shareGo() {
				var _this = this;
				if (uni.getStorageSync('TOKEN')) {
					this.testToken('/site/get-info',{}).then(res => {
						if(res.data.status==200){//token有效
							_this.getLogonUser(); //当前登录用户
							_this.shareWayShow = true;
						}
					})
				}
			},
			// 生成海报
			generateGo() {
				this.showLoadGo(true);
				this.painterShow = true;
				this.shareWayShow = false;
				if(this.posterPath!=''){
					this.showLoadGo(false);
				}
			},
			savePoster() {
				var _this = this;
				uni.saveImageToPhotosAlbum({
					filePath: this.posterPath,
					success(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000,
							success: function() {
								_this.painterShow = false
							}
						})
					}
				})
			},
			getToheleTasting(){   
				uni.navigateTo({
				    url: '/pages/scanCode/bottleCap'
				});
			}
		}
	}
</script>

<style lang='scss' scoped>
.wine_home{
	min-height: 100%;
	background: linear-gradient(180deg, #F76148 0%, #D84C35 15.1%, #F76148 36.98%, #F76148 100%);
	
	.wine_bg{
		overflow: hidden;
		background-image: url("https://lovebirdopen.com/static/img/wineTasting/wine_home.png");
		background-size: 100% 48%;
		background-repeat: no-repeat;
		background-position: 0rpx 7.5%;
		
		.save{
			height: 218rpx;
			width: 60rpx;
			top: 110rpx;
			right: 0rpx;
			position: fixed;
			display: flex;
			flex-direction: column;  /*  弯曲方向 */
			justify-content: space-around;
			align-items: center;
			background-image: url("https://lovebirdopen.com/static/img/wineTasting/save.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			 
			.cap_right{
				height: 24rpx;
				width: 24rpx;
			}
			.bottle_title{
				line-height: 34rpx;
				width: 30rpx;
				word-wrap: break-word;
			}
			image{
				height: 52rpx;
				width: 40rpx;
			}
		}
		
		.goodsPainter {
			width: 450rpx;
			height: 660rpx;
			/* background-color: #007AFF; */
			position: fixed;
			top: 34%;
			left: 50%;
			overflow: hidden;
			z-index: 10076;
			border-radius: 15rpx;
			transform: translate(-50%, -50%);
			
			image{
				width: 450rpx;
				height: 660rpx;
			}
		}

		.shareWaysBox {
			padding: 64rpx 32rpx;
			
			.shareWays {
				display: flex;
				padding-bottom: 60rpx;
				text-align: center;
			
				.shareWaysEach {
					flex: 1;
			
					.shareFriendsBtn {
						border: none;
					}
			
					.shareWaysEachIcon {
						display: flex;
						align-items: center;
						justify-content: center;
						height: 112rpx;
						width: 112rpx;
						margin: 0 auto;
						background: #F7F7F7;
						border-radius: 8rpx;
					}
			
					.tit {
						margin-top: 16rpx;
						font-size: 24rpx;
						line-height: 40rpx;
						color: #999999;
					}
				}
			}
			
			.cancel {
				height: 96rpx;
				font-size: 32rpx;
				line-height: 96rpx;
				text-align: center;
				color: #333;
				background: #F7F7F7;
				border-radius: 48px;
			}
		}

		.painterCans {
			position: fixed;
			left: -800rpx;
			width: 570rpx;
			height: 903rpx;
		}
		.savePainter {
			margin-top: 52rpx;
			padding: 0 32rpx 68rpx;
	
			.saveBtn {
				height: 96rpx;
				font-size: 32rpx;
				line-height: 96rpx;
				color: #fff;
				text-align: center;
				background: #FF5238;
				box-shadow: 0px 4rpx 8rpx rgba(255, 82, 56, 0.18);
				border-radius: 48rpx;
			}
		}
		
	}
	.wine_content{
		width: 400rpx;
		height: 74rpx;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: url("https://lovebirdopen.com/static/img/wineTasting/Intersect.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		
		image{
			height: 56rpx;
			width: 56rpx;
			border-radius: 50%;
			line-height: 74rpx;
		}
		
		.wine_names{
			font-family: PingFang SC;
			font-size: 24rpx;
			line-height: 24rpx;
			color: #FFFFFF;
			flex: none;
			order: 1;
			flex-grow: 0;
			margin-left: 22rpx;
			
		}
	}
	.wine_Inviting{
		width: 304rpx;
		height: 42px;
		margin: 0 auto;
		margin-bottom: 5.3rpx;
		position: relative;
		
		#inviting{
			width: 220rpx;
			height: 32rpx;
			position: absolute;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);
		}
		#inviting_one{
			width: 24rpx;
			height: 30rpx;
			position: absolute;
			top:10rpx;
			left: 4rpx;
		}
		#inviting_two{
			width: 12rpx;
			height: 14rpx;
			position: absolute;
			top:43rpx;
			left: 24rpx;
		}
		#inviting_three{
			width: 12rpx;
			height: 14rpx;
			position: absolute;
			top:43rpx;
			right: 24rpx;
		}
		#inviting_four{
			width: 24rpx;
			height: 30rpx;
			position: absolute;
			top: 10rpx;
			right: 4rpx;
		}
	}
	.good_wine{
		height: 58rpx;
		width: 588rpx;
		margin: 0 auto;
		
		image{
			height: 100%;
			width: 100%;
		}
	}
	.good_progressbg{
		width: 686rpx;
		/* height: 252rpx; */
		overflow: hidden;
		margin: 0 auto;
		margin-top: 36rpx;
		background-image: url("https://lovebirdopen.com/static/img/wineTasting/progressbg.png");
		background-size: 100% 100%;
		
		.progress{
			height: 80rpx;
			width: 420rpx;
			display: flex;
			/* justify-content: center; */
			align-items: flex-end;
			overflow: hidden;
			border-radius: 40rpx;
			background: rgba(0,0,0,0.12);
			
			.swiper{
				height: 80rpx;
				width: 80%;
				margin-left: 30rpx;
				
				.wine_logo{
					height: 40rpx;
					width: 40rpx;
					overflow: hidden;
					border-radius: 50%;
					
					image{
						height: 100%;
						width: 100%;
					}
				}
			}
			.swiperCalss{
				margin-buttom: 10rpx;
			}
			.uni-swiper .uni-swiper-wrapper{
				overflow: visible;
			}
			.wine_name{
				font-family: PingFang SC;
				font-size: 28rpx;
				/* line-height: 80rpx; */
				color: #FFFFFF;
				flex: none;
				order: 1;
				flex-grow: 0;
				margin-left: 12rpx;
			}
		}
		.rule{
			height: 56rpx;
			width: 144rpx;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: normal;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 56rpx;
			text-align: center;
			background: rgba(0, 0, 0, 0.24);
			border-radius: 42rpx;
		}
		
		.warp {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
			}
		
		
		
		.rect {
			width: 634rpx;
			/* height: 1062rpx; */
			overflow: hidden;
			border-radius: 16rpx;
			background-color: #fff;
			background-image: url('https://lovebirdopen.com/static/img/wineTasting/rule_bg.png');
			background-size: 100% 30%;
			background-repeat: no-repeat;
			
			.rect_rule{
				height: 48rpx;
				width: 100%;
				margin-top: 20rpx;
				font-size: 32rpx;
				text-align: center;
				line-height: 48rpx;
				color: #fff;
			}
			.rule_title{
				/* height: 328rpx; */
				width: 79%;
				margin: 0 auto;
				margin-top: 80rpx;
				font-size: 24rpx;
				/* line-height: 44rpx; */
				color: #333333;
			}
			.rule_title1{
				width: 79%;
				margin: 0 auto;
				margin-top: 16rpx;
				font-size: 24rpx;
				/* line-height: 44rpx; */
				color: #333333;
			}
			.rule_buttom{
				height: 80rpx;
				width: 376rpx;
				margin: 40rpx auto;
				border-radius: 70rpx;
				font-weight: bold;
				text-align: center;
				font-size: 32rpx;
				line-height: 80rpx;
				color: #FFFFFF;
				background: linear-gradient(93.88deg, #FC6A3C 7.19%, #FF5238 94.63%);
				box-shadow: 0px 2px 0px rgba(176, 23, 0, 0.2), inset 0px 1px 5px rgba(198, 0, 0, 0.3);
				}
		}
		
		.progress_bar{
			width: 614rpx;
			height: 210rpx;
			margin: 0 auto;
			position: relative;
			margin-top: 14rpx;
			margin-bottom: 24rpx;
			/* background: #fff; */
			text-align: center;
			line-height: 210rpx;
			
			.ez_bao2{
				width: 590rpx;
				height: 63rpx;
				position: absolute;  //实现最底层bg 居中
				top: 0%;
				left: 5%;
				/* transform: translate(-50%, -50%); */
			}
			
			.ez_bg{
				height: 20rpx;
				width: 590rpx;
				position: absolute;  //实现最底层bg 居中
				top: 50%;
				left: 50%;
				z-index: 2;
				transform: translate(-50%, -50%);
				background-image: url('https://lovebirdopen.com/static/img/wineTasting/ez_bg2.svg');
				/* background-size: 100% 100%; */
				background-repeat: repeat-x;
			}
			
			.ez_bao{
				height: 200rpx;
				width: 590rpx;
				z-index: 1;
				position: absolute;  //实现最底层bg 居中
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				border-radius: 30rpx;
				/* overflow: hidden; */
				
				.ez_bg2{
					height: 20rpx;
					/* width: 590rpx; */
					position: absolute;
					top: 45%;
					background: linear-gradient(-90deg, #FFEB38 0%, #FF2A2A 53.12%);
					background-repeat: no-repeat;
					background-size: 100% 100%;
					border-radius: 15rpx;
					
					.indicator_title{
					    font-size: 24rpx;
					    line-height: 32rpx;
					    text-align: center;
					    color: #FF5238;
					    height: 66rpx;
					    width: 165rpx;
						z-index: 5;
					    position: absolute;
					    bottom: 48rpx;
					    left: calc(100% - 40px);
						border-radius: 10rpx;
					    background: #FFEB38;
					}
					image{
					    height: 62rpx;
					    width: 4rpx;
					    position: absolute;
					    bottom: 48%;
					    left: 99%;
					}
				}
			}
			.ez_jiup{
				height: 84rpx;
				width: 590rpx;
				z-index: 3;
				position: absolute;  /*实现最底层bg 居中 */
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				/* background-color: #09BB07; */
				
				.ez_jiupss{
					height: 20rpx;
					width: 100%;
					position: relative;
					
					.ez_jiupss1{       /* 字幕 */
						height: 20rpx;
						font-size: 28rpx;
						line-height: 20rpx;
						text-align: center;
						position: absolute;
						left: calc(12.5% - 38rpx);
						color: rgba(255, 255, 255, 0.7);
					}
					.ez_jiupss2{       /* 字幕 */
						height: 20rpx;
						font-size: 28rpx;
						line-height: 20rpx;
						text-align: center;
						position: absolute;
						left: calc(50% - 38rpx);
						color: rgba(255, 255, 255, 0.7);
					}
					.ez_jiupss3{       /* 字幕 */
						height: 20rpx;
						font-size: 28rpx;
						line-height: 20rpx;
						text-align: center;
						position: absolute;
						left: calc(96% - 38rpx);
						color: rgba(255, 255, 255, 0.7);
					}
				}
				.ez_jiups{
					height: 100%;
					width: 100%;
					display: flex;
					position: relative;
					justify-content: space-between;
					align-items: center;
					
					.ez_jiup1_1{       /*酒坛一 */
						height: 100%;
						width: 76rpx;
						position: absolute;
						left:calc(12.5% - 38rpx);
						background: url('https://lovebirdopen.com/static/img/wineTasting/wine_jars.png');
						background-size: 100% 100%;
						.ez_jiupRod{
							height: 62rpx;
							width: 4rpx;
							position: absolute;
							left: 48%;
							bottom: 30rpx;
							z-index: -1;
							background: #FFEB38;
						}
						.ez_jiupBrand{
							height: 48rpx;
							width: 90rpx;
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 24rpx;
							line-height: 48rpx;
							text-align: center;
							border-radius: 10rpx;
							position: absolute;
							left: calc(100% - 90rpx - 0px);
							bottom: 80rpx;
							letter-spacing: 0.2625px;
							color: #FF5238;
							background: #FFEB38;
						}
						.receivedTitle{
							height: 20rpx;
							width: 60rpx;
							margin: 0 auto;
							font-size: 13rpx;
							line-height: 84rpx;
							text-align: center;
							color: #fff;
						}
					}
					.ez_jiup1_2{       /*酒坛二 */
						height: 100%;
						width: 76rpx;
						position: absolute;
						left:calc(50% - 38rpx);
						background: url('https://lovebirdopen.com/static/img/wineTasting/wine_jars.png');
						background-size: 100% 100%;
						.ez_jiupRod{
							height: 62rpx;
							width: 4rpx;
							position: absolute;
							left: 48%;
							bottom: 30rpx;
							z-index: -1;
							background: #FFEB38;
						}
						.ez_jiupBrand{
							height: 48rpx;
							width: 90rpx;
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 24rpx;
							line-height: 48rpx;
							text-align: center;
							border-radius: 10rpx;
							position: absolute;
							left: calc(100% - 90rpx - 0px);
							bottom: 80rpx;
							letter-spacing: 0.2625px;
							color: #FF5238;
							background: #FFEB38;
						}
						.receivedTitle{
							height: 20rpx;
							width: 60rpx;
							margin: 0 auto;
							font-size: 13rpx;
							line-height: 84rpx;
							text-align: center;
							color: #fff;
						}
					}
					.ez_jiup1_3{       /*酒坛三 */
						height: 100%;
						width: 76rpx;
						position: absolute;
						left: calc(100% - 38rpx);
						background: url('https://lovebirdopen.com/static/img/wineTasting/wine_jars.png');
						background-size: 100% 100%;
						.ez_jiupRod{
							height: 62rpx;
							width: 4rpx;
							position: absolute;
							left: 48%;
							bottom: 30rpx;
							z-index: -1;
							background: #FFEB38;
						}
						.ez_jiupBrand{
							height: 48rpx;
							width: 90rpx;
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 24rpx;
							line-height: 48rpx;
							text-align: center;
							border-radius: 10rpx;
							position: absolute;
							left: calc(100% - 90rpx - 0px);
							bottom: 80rpx;
							letter-spacing: 0.2625px;
							color: #FF5238;
							background: #FFEB38;
						}
						.receivedTitle{
							height: 20rpx;
							width: 60rpx;
							margin: 0 auto;
							font-size: 13rpx;
							line-height: 84rpx;
							text-align: center;
							color: #fff;
						}
					}
					.ez_jiup_opens{    
						height: 100%;
						width: 76rpx;
						background: url('https://lovebirdopen.com/static/img/wineTasting/wine_jar_opens.png');
						background-size: 100% 100%;
						
					}
					
					.ez_jiup3_1{         /*酒坛一 另一种状态*/
						height: 100%;
						width: 76rpx;
						position: relative;
						left: calc(12.5% - 38rpx);
						background: url('https://lovebirdopen.com/static/img/wineTasting/wine_jar_opens.png');
						background-size: 100% 100%;
						.ez_jiupRod{
							height: 62rpx;
							width: 4rpx;
							position: absolute;
							left: 48%;
							bottom: 30rpx;
							z-index: -1;
							background: #FFEB38;
						}
						.ez_jiupBrand{
							height: 48rpx;
							width: 90rpx;
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 24rpx;
							line-height: 48rpx;
							text-align: center;
							border-radius: 10rpx;
							position: absolute;
							left: calc(100% - 45px - 0px);
							bottom: 80rpx;
							letter-spacing: 0.2625px;
							color: #FF5238;
							background: #FFEB38;
						}
						.receivedTitle{
							height: 20rpx;
							width: 60rpx;
							margin: 0 auto;
							font-size: 16rpx;
							line-height: 84rpx;
							text-align: center;
							color: #fff;
						}
					}
					.ez_jiup3_2{         /*酒坛2 另一种状态*/
						height: 100%;
						width: 76rpx;
						position: relative;
						left: calc(50% - 38rpx);
						background: url('https://lovebirdopen.com/static/img/wineTasting/wine_jar_opens.png');
						background-size: 100% 100%;
						.ez_jiupRod{
							height: 62rpx;
							width: 4rpx;
							position: absolute;
							left: 48%;
							bottom: 30rpx;
							z-index: -1;
							background: #FFEB38;
						}
						.ez_jiupBrand{
							height: 48rpx;
							width: 90rpx;
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 24rpx;
							line-height: 48rpx;
							text-align: center;
							border-radius: 10rpx;
							position: absolute;
							left: calc(100% - 45px - 0px);
							bottom: 80rpx;
							letter-spacing: 0.2625px;
							color: #FF5238;
							background: #FFEB38;
						}
						.receivedTitle{
							height: 20rpx;
							width: 60rpx;
							margin: 0 auto;
							font-size: 16rpx;
							line-height: 84rpx;
							text-align: center;
							color: #fff;
						}
					}
					.ez_jiup3_3{         /*酒坛3 另一种状态*/
						height: 100%;
						width: 76rpx;
						position: relative;
						left: calc(100% - 38rpx);
						background: url('https://lovebirdopen.com/static/img/wineTasting/wine_jar_opens.png');
						background-size: 100% 100%;
						.ez_jiupRod{
							height: 62rpx;
							width: 4rpx;
							position: absolute;
							left: 48%;
							bottom: 30rpx;
							z-index: -1;
							background: #FFEB38;
						}
						.ez_jiupBrand{
							height: 48rpx;
							width: 90rpx;
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 24rpx;
							line-height: 48rpx;
							text-align: center;
							border-radius: 10rpx;
							position: absolute;
							left: calc(100% - 45px - 0px);
							bottom: 80rpx;
							letter-spacing: 0.2625px;
							color: #FF5238;
							background: #FFEB38;
						}
						.receivedTitle{
							height: 20rpx;
							width: 60rpx;
							margin: 0 auto;
							font-size: 16rpx;
							line-height: 84rpx;
							text-align: center;
							color: #fff;
						}
					}
				}
				
			}
		}
	}
	.power_button{
		width: 60%;
		height: 96rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FF5238;
		margin: 24rpx auto;
		background: linear-gradient(180deg, #FFEFCD 0%, #E5B642 100%);
		border-radius: 64rpx;
		
		.power_button_one{
			width:98%;
			height: 90rpx;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: bold;
			font-size: 32rpx;
			text-align: center;
			line-height: 96rpx;
			color: #FF5238;
			margin: 0 auto;
			background: linear-gradient(180deg, #F7E6AD 0%, #FFEB66 69.27%, #F9DE71 100%);
			border-radius: 64rpx;
		}
	}
	.second_kill_list{
		width: 686rpx;
		/* height: 50rpx; */
		overflow: hidden;
		margin: 0 auto;
		background: linear-gradient(180deg, #FFCA99 0%, #FFA15C 43.75%, #FFA15C 100%);
		border-radius: 8px;
		
		.second_kill{
			width: 80%;
			height: 80rpx;
			margin: 24rpx auto;
			line-height: 80rpx;
			position: relative;
			.wine_I_1{
				height: 48rpx;
				width: 100%;
				font-family: PingFang SC;
				font-size: 32rpx;
				text-align: center;
				color: #ffffff;
			}
			#inviting{
				width: 220rpx;
				height: 32rpx;
				position: absolute;
				top:50%;
				left:50%;
				transform: translate(-50%,-50%);
			}
			#inviting_one{
				width: 38rpx;
				height: 66rpx;
				position: absolute;
				top:4rpx;
				left: 170rpx;
			}
			#inviting_two{
				width: 41rpx;
				height: 32rpx;
				position: absolute;
				top:16rpx;
				left: 190rpx;
			}
			#inviting_three{
				width: 41rpx;
				height: 32rpx;
				position: absolute;
				top:16rpx;
				right: 190rpx;
			}
			#inviting_four{
				width: 38rpx;
				height: 66rpx;
				position: absolute;
				top: 4rpx;
				right: 170rpx;
			}
		}
	}
	.second_list{
		width: 638rpx;
		height: 228rpx;
		margin: 24rpx auto;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;
		
		image{
			height: 180rpx;
			width: 180rpx;
			margin: 24rpx 24rpx 24rpx 24rpx;
		}
		
		.second_content{
			height: 180rpx;
			width: 394rpx;
			
			.second_title{
				
				font-family: PingFang SC;
				font-size: 28rpx;
				line-height: 40rpx;
				color: #333333;
			}
			.progress_ss{
				font-family: PingFang SC;
				font-size: 20rpx;
				/* line-height: 10px; */
				/* 文字/次要文字 */
				color: #999999;
			}
			.progress_kk{
				width: 30%;
				font-family: PingFang SC;
				font-size: 20rpx;
				text-decoration: line-through;
				/* line-height: 10px; */
				/* 文字/次要文字 */
				color: #999999;
			}
			.progress_kk2{
				width: 144rpx;
				height: 56rpx;
				background: #FF5238;
				box-shadow: 0rpx 4rpx 8rpx rgba(255, 82, 56, 0.18);
				border-radius: 70rpx;
				font-family: PingFang SC;
				font-size: 24rpx;
				line-height: 56rpx;
				margin-right: 12rpx;
				text-align: center;
				color: #FFFFFF;
			}
			.progress_kk3{
				width: 144rpx;
				height: 56rpx;
				background: #E8E8E8;
				box-shadow: 0rpx 4rpx 8rpx rgba(255, 82, 56, 0.18);
				border-radius: 70rpx;
				font-family: PingFang SC;
				font-size: 24rpx;
				line-height: 56rpx;
				margin-right: 12rpx;
				text-align: center;
				color: #999999;
			}
		}
	}
	
	$font-color-dark:  #7B5D34;
	$base-color: #FF5238;
	$font-base:24rpx;
	$font-lg:20rpx;
	$font-color-light:red;
	$font-sm:20upx;
	$border-color-dark:#7B5D34;
	$font-base:20upx;
	.tabsswiper{
		width: 91%;
		margin: 32rpx 32rpx 32rpx auto;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background: white;
		overflow: hidden;
		
		.more{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.more_title{
				height: 40rpx;
				width: 100rpx;
				font-size: 24rpx;
				color: #666;
			}
			
			
		}
		
		.tabs_list{
			width: 100%;
			height: 116rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			/* background-color: #007AFF; */
			
			.list_ranking{
				height: 80rpx;
				width: 80rpx;
				image{
					height: 100%;
					width: 100%;
				}
			}
		}
		.tabs_list2{
			width: 80%;
			height: 116rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			/* background-color: #007AFF; */
			
			.active{
				color: #333333;
			}
			.otherActiveClass{
				color: #FF5238;
			}
			.list_ranking{
				height: 50rpx;
				width: 50rpx;
				text-align: center;
				line-height: 50rpx;
				margin-right: 14rpx;
				image{
					height: 100%;
					width: 100%;
				}
			}
		}
		.wrap {
				padding: 24rpx;
			}
			
			.item {
				padding: 24rpx 0;
				color: $u-content-color;
				font-size: 28rpx;
		}
		.wine_I{
			width: 380rpx;
			height: 42px;
			margin: 0 auto;
			margin-bottom: 5.3rpx;
			position: relative;
			.wine_I_1{
				height: 48rpx;
				width: 100%;
				font-family: PingFang SC;
				font-size: 32rpx;
				position: absolute;
				top:50%;
				left:50%;
				transform: translate(-50%,-50%);
				color: #FF5238;
			}
			#inviting{
				width: 220rpx;
				height: 32rpx;
				position: absolute;
				top:50%;
				left:50%;
				transform: translate(-50%,-50%);
			}
			#inviting_one{
				width: 24rpx;
				height: 30rpx;
				position: absolute;
				top:14rpx;
				left: -44rpx;
			}
			#inviting_two{
				width: 12rpx;
				height: 14rpx;
				position: absolute;
				top:46rpx;
				left: -22rpx;
			}
			#inviting_three{
				width: 12rpx;
				height: 14rpx;
				position: absolute;
				top:45rpx;
				right: -15rpx;
			}
			#inviting_four{
				width: 24rpx;
				height: 30rpx;
				position: absolute;
				top: 13rpx;
				right: -42rpx;
			}
		}
		.swiper-box {
			height: calc(100% - 40px);
		}
		.list-scroll-content {
			height: 100%;
		}
		
		.navbar {
			display: flex;
			height: 40px;
			padding: 0 5px;
			background: #fff;
			box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
			border-bottom: 4rpx solid #ff9766;
			position: relative;
			z-index: 10;
			.nav-item {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: $font-color-dark;
				position: relative;
				&.current {
					color: $base-color;
					&:after {
						content: '';
						position: absolute;
						left: 50%;
						bottom: -4rpx;
						transform: translateX(-50%);
						width: 48rpx;
						height: 0;
						border-bottom: 10rpx solid $base-color;
						border-radius: 50rpx;
					}
				}
			}
		}
		
		.uni-swiper-item {
			height: auto;
		}
		.order-item {
			display: flex;
			flex-direction: column;
			padding-left: 30upx;
			background: #fff;
			margin-top: 16upx;
			.i-top {
				display: flex;
				align-items: center;
				height: 80upx;
				padding-right: 30upx;
				font-size: $font-base;
				color: $font-color-dark;
				position: relative;
				.time {
					flex: 1;
				}
				.state {
					color: $base-color;
				}
				.del-btn {
					padding: 10upx 0 10upx 36upx;
					font-size: $font-lg;
					color: $font-color-light;
					position: relative;
					&:after {
						content: '';
						width: 0;
						height: 30upx;
						border-left: 1px solid $border-color-dark;
						position: absolute;
						left: 20upx;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
			/* 多条商品 */
			.goods-box {
				height: 160upx;
				padding: 20upx 0;
				white-space: nowrap;
				.goods-item {
					width: 120upx;
					height: 120upx;
					display: inline-block;
					margin-right: 24upx;
				}
				.goods-img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			/* 单条商品 */
			.goods-box-single {
				display: flex;
				padding: 20upx 0;
				.goods-img {
					display: block;
					width: 120upx;
					height: 120upx;
				}
				.right {
					flex: 1;
					display: flex;
					flex-direction: column;
					padding: 0 30upx 0 24upx;
					overflow: hidden;
					.title {
						font-size: $font-base + 2upx;
						color: $font-color-dark;
						line-height: 1;
					}
					.attr-box {
						font-size: $font-sm + 2upx;
						color: $font-color-light;
						padding: 10upx 12upx;
					}
					.price {
						font-size: $font-base + 2upx;
						color: $font-color-dark;
						&:before {
							content: '￥';
							font-size: $font-sm;
							margin: 0 2upx 0 8upx;
						}
					}
				}
			}
		
			.price-box {
				display: flex;
				justify-content: flex-end;
				align-items: baseline;
				padding: 20upx 30upx;
				font-size: $font-sm + 2upx;
				color: $font-color-light;
				.num {
					margin: 0 8upx;
					color: $font-color-dark;
				}
				.price {
					font-size: $font-lg;
					color: $font-color-dark;
					&:before {
						content: '￥';
						font-size: $font-sm;
						margin: 0 2upx 0 8upx;
					}
				}
			}
			.action-box {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				height: 100upx;
				position: relative;
				padding-right: 30upx;
			}
			.action-btn {
				width: 160upx;
				height: 60upx;
				margin: 0;
				margin-left: 24upx;
				padding: 0;
				text-align: center;
				line-height: 60upx;
				font-size: $font-sm + 2upx;
				color: $font-color-dark;
				background: #fff;
				border-radius: 100px;
				&:after {
					border-radius: 100px;
				}
				&.recom {
					background: #fff9f9;
					color: $base-color;
					&:after {
						border-color: #f7bcc8;
					}
				}
			}
		}
	}
	
}


/* 动画组 */
.rowupGo {
		animation: 1.75s rowup infinite;
		-webkit-animation: 1.75s rowup ease-in-out infinite;
		-moz-animation:  1.75s rowup  infinite;
	}
.rowupGo-tow{
	animation: 1s rowup infinite;
	-webkit-animation: 1s rowup ease-in-out infinite;
	-moz-animation:  1s rowup  infinite;
}
.rowupGo-three{
	animation: 1.3s rowup infinite;
	-webkit-animation: 1.3s rowup ease-in-out infinite;
	-moz-animation:  1.3s rowup  infinite;
}
.rowupGo-four{
	animation: 1.55s rowup infinite;
	-webkit-animation: 1.55s rowup ease-in-out infinite;
	-moz-animation:  1.55s rowup  infinite;
}
	// 动画

	@keyframes rowup {
		0% {
			/* transform: translateY(0); */
			opacity: 0;
		}
		50% {
			/* transform: translateY(calc(-100%)); */
			opacity: 1;
		}

		100% {
			/* transform: translateY(calc(-200%)); */
			opacity: 0;
		}
	}

	@-webkit-keyframes rowup {
		0% {
			/* transform: translateY(0); */
			opacity: 0;
		}
		50% {
			/* transform: translateY(calc(-100%)); */
			opacity: 1;
		}

		100% {
			/* transform: translateY(calc(-200%)); */
			opacity: 0;
		}
	}

	@-moz-keyframes rowup {
		0% {
			/* transform: translateY(0); */
			opacity: 0;
		}
		50% {
			/* transform: translateY(calc(-100%)); */
			opacity: 1;
		}

		100% {
			/* transform: translateY(calc(-200%)); */
			opacity: 0;
		}
	}
	
</style>
